


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">

    <title>
      
        Icon nav &middot; 
      
    </title>

    <link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" rel="stylesheet">
    
      <link href="../assets/css/toolkit-inverse.css" rel="stylesheet">
    
    
    <link href="../assets/css/application.css" rel="stylesheet">

    <style>
      /* note: this is a hack for ios iframe for bootstrap themes shopify page */
      /* this chunk of css is not part of the toolkit :) */
      body {
        width: 1px;
        min-width: 100%;
        *width: 100%;
      }
    </style>
  </head>


<body>
  



<div class="with-iconav">

  <nav class="iconav">
    <a class="iconav-brand" href="../index.html">
      <span class="icon icon-leaf iconav-brand-icon"></span>
    </a>
    <div class="iconav-slider">
      <ul class="nav nav-pills iconav-nav">
        <li >
          <a href="../index.html" title="Overview" data-toggle="tooltip" data-placement="right" data-container="body">
            <span class="icon icon-home"></span>
            <small class="iconav-nav-label visible-xs-block">Overview</small>
          </a>
        </li>
        <li >
          <a href="../order-history/index.html" title="Order history" data-toggle="tooltip" data-placement="right" data-container="body">
            <span class="icon icon-text-document"></span>
            <small class="iconav-nav-label visible-xs-block">History</small>
          </a>
        </li>
        <li >
          <a href="../fluid/index.html" title="Fluid layout" data-toggle="tooltip" data-placement="right" data-container="body">
            <span class="icon icon-globe"></span>
            <small class="iconav-nav-label visible-xs-block">Fluid layout</small>
          </a>
        </li>
        <li class="active">
          <a href="../icon-nav/index.html" title="Icon-nav layout" data-toggle="tooltip" data-placement="right" data-container="body">
            <span class="icon icon-area-graph"></span>
            <small class="iconav-nav-label visible-xs-block">Icon nav</small>
          </a>
        </li>
        <li >
          <a href="../docs/index.html" title="Docs" data-toggle="tooltip" data-placement="right" data-container="body">
            <span class="icon icon-list"></span>
            <small class="iconav-nav-label visible-xs-block">Docs</small>
          </a>
        </li>
        <li >
          <a href="../light/index.html" title="Light UI" data-toggle="tooltip" data-placement="right" data-container="body">
            <span class="icon icon-flash"></span>
            <small class="iconav-nav-label visible-xs-block">Light UI</small>
          </a>
        </li>
        <li>
          <a href="#" title="Signed in as mdo" data-toggle="tooltip" data-placement="right" data-container="body">
            <img src="../assets/img/avatar-mdo.png" alt="" class="img-circle img-responsive">
            <small class="iconav-nav-label visible-xs-block">@mdo</small>
          </a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="container">
    <div class="dashhead">
      <div class="dashhead-titles">
        <h6 class="dashhead-subtitle">Dashboards</h6>
        <h3 class="dashhead-title">Overview</h3>
      </div>

      <div class="dashhead-toolbar">
        <div class="input-with-icon dashhead-toolbar-item">
          <input type="text" value="01/01/15 - 01/08/15" class="form-control" data-provide="datepicker">
          <span class="icon icon-calendar"></span>
        </div>
        <span class="dashhead-toolbar-divider hidden-xs"></span>
        <div class="btn-group dashhead-toolbar-item btn-group-thirds">
          <button type="button" class="btn btn-primary-outline">Day</button>
          <button type="button" class="btn btn-primary-outline active">Week</button>
          <button type="button" class="btn btn-primary-outline">Month</button>
        </div>
      </div>
    </div>

    <ul class="nav nav-bordered m-t m-b-0" role="tablist">
      <li class="active" role="presentation">
        <a href="#traffic" role="tab" data-toggle="tab" aria-controls="traffic">Traffic</a>
      </li>
      <li role="presentation">
        <a href="#sales" role="tab" data-toggle="tab" aria-controls="sales">Sales</a>
      </li>
      <li role="presentation">
        <a href="#support" role="tab" data-toggle="tab" aria-controls="support">Support</a>
      </li>
    </ul>

    <hr class="m-t-0 m-b-lg">

    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="traffic">
        <div class="row text-center m-t-md">
          <div class="col-sm-4 m-b-md">
            <div class="w-lg m-x-auto">
              <canvas
                class="ex-graph"
                width="200" height="200"
                data-chart="doughnut"
                data-value="[{ value: 230, color: '#42a5f5', label: 'Returning' }, { value: 130, color: '#1bc98e', label: 'New' }]"
                data-segment-stroke-color="#222">
              </canvas>
            </div>
            <strong class="text-muted">Traffic</strong>
            <h3>New vs Returning</h3>
          </div>
          <div class="col-sm-4 m-b-md">
            <div class="w-lg m-x-auto">
              <canvas
                class="ex-graph"
                width="200" height="200"
                data-chart="doughnut"
                data-value="[{ value: 330, color: '#42a5f5', label: 'Recurring' }, { value: 30, color: '#1bc98e', label: 'New' }]"
                data-segment-stroke-color="#222">
              </canvas>
            </div>
            <strong class="text-muted">Revenue</strong>
            <h3>New vs Recurring</h3>
          </div>
          <div class="col-sm-4 m-b-md">
            <div class="w-lg m-x-auto">
              <canvas
                class="ex-graph"
                width="200" height="200"
                data-chart="doughnut"
                data-value="[{ value: 100, color: '#42a5f5', label: 'Referrals' }, { value: 260, color: '#1bc98e', label: 'Direct' }]"
                data-segment-stroke-color="#222">
              </canvas>
            </div>
            <strong class="text-muted">Traffic</strong>
            <h3>Direct vs Referrals</h3>
          </div>
        </div>
      </div>

      <div role="tabpanel" class="tab-pane" id="sales">
        <div class="ex-line-graphs m-b-md">
          <canvas
            class="ex-line-graph"
            width="600" height="400"
            data-chart="line"
            data-scale-line-color="transparent"
            data-scale-grid-line-color="rgba(255,255,255,.05)"
            data-scale-font-color="#a2a2a2"
            data-labels="['','Aug 29','','','Sept 5','','','Sept 12','','','Sept 19','']"
            data-value="[{data: [2500, 3300, 2512, 2775, 2498, 3512, 2925, 4275, 3507, 3825, 3445, 3985]}]">
          </canvas>
        </div>
      </div>

      <div role="tabpanel" class="tab-pane" id="support">
        <div class="ex-line-graphs m-b-md">
          <canvas
            class="ex-line-graph"
            width="600" height="400"
            data-chart="bar"
            data-scale-line-color="transparent"
            data-scale-grid-line-color="rgba(255,255,255,.05)"
            data-scale-font-color="#a2a2a2"
            data-labels="['August','September','October','November','December','January','February']"
            data-value="[{ label: 'First dataset', data: [65, 59, 80, 81, 56, 55, 40] }, { label: 'Second dataset', data: [28, 48, 40, 19, 86, 27, 90] }]">
          </canvas>
        </div>
      </div>
    </div>

    <div class="hr-divider m-t m-b">
      <h3 class="hr-divider-content hr-divider-heading">Quick stats</h3>
    </div>

    <div class="row statcards m-t-md m-b text-xs-center text-md-left">
      <div class="col-xs-6 col-sm-3 statcard m-b">
        <h3 class="statcard-number text-success">
          12,938
          <small class="delta-indicator delta-positive">5%</small>
        </h3>
        <span class="statcard-desc">Page views</span>
      </div>
      <div class="col-xs-6 col-sm-3 statcard m-b">
        <h3 class="statcard-number text-danger">
          758
          <small class="delta-indicator delta-negative">1.3%</small>
        </h3>
        <span class="statcard-desc">Downloads</span>
      </div>
      <div class="col-xs-6 col-sm-3 statcard m-b">
        <h3 class="statcard-number text-success">
          1,293
          <small class="delta-indicator delta-positive">6.75%</small>
        </h3>
        <span class="statcard-desc">Sign-ups</span>
      </div>
      <div class="col-xs-6 col-sm-3 statcard m-b">
        <h3 class="statcard-number text-danger">
          758
          <small class="delta-indicator delta-negative">1.3%</small>
        </h3>
        <span class="statcard-desc">Downloads</span>
      </div>
    </div>

    <hr class="m-t-0 m-b-md">

    <div class="row">
      <div class="col-md-4 m-b-md">
        <div class="list-group">
          <h4 class="list-group-header">
            Countries
          </h4>
          
            <a class="list-group-item" href="#">
              <span class="list-group-progress" style="width: 62.4%;"></span>
              <span class="pull-right text-muted">62.4%</span>
              United States
            </a>
          
            <a class="list-group-item" href="#">
              <span class="list-group-progress" style="width: 15.0%;"></span>
              <span class="pull-right text-muted">15.0%</span>
              India
            </a>
          
            <a class="list-group-item" href="#">
              <span class="list-group-progress" style="width: 5.0%;"></span>
              <span class="pull-right text-muted">5.0%</span>
              United Kingdom
            </a>
          
            <a class="list-group-item" href="#">
              <span class="list-group-progress" style="width: 5.0%;"></span>
              <span class="pull-right text-muted">5.0%</span>
              Canada
            </a>
          
            <a class="list-group-item" href="#">
              <span class="list-group-progress" style="width: 4.5%;"></span>
              <span class="pull-right text-muted">4.5%</span>
              Russia
            </a>
          
            <a class="list-group-item" href="#">
              <span class="list-group-progress" style="width: 2.3%;"></span>
              <span class="pull-right text-muted">2.3%</span>
              Mexico
            </a>
          
            <a class="list-group-item" href="#">
              <span class="list-group-progress" style="width: 1.7%;"></span>
              <span class="pull-right text-muted">1.7%</span>
              Spain
            </a>
          
            <a class="list-group-item" href="#">
              <span class="list-group-progress" style="width: 1.5%;"></span>
              <span class="pull-right text-muted">1.5%</span>
              France
            </a>
          
            <a class="list-group-item" href="#">
              <span class="list-group-progress" style="width: 1.4%;"></span>
              <span class="pull-right text-muted">1.4%</span>
              South Africa
            </a>
          
            <a class="list-group-item" href="#">
              <span class="list-group-progress" style="width: 1.2%;"></span>
              <span class="pull-right text-muted">1.2%</span>
              Japan
            </a>
          
        </div>
        <a href="#" class="btn btn-primary-outline">All countries</a>
      </div>
      <div class="col-md-4 m-b-md">
        <div class="list-group">
          <h4 class="list-group-header">
            Most visited pages
          </h4>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">3,929,481</span>
              / (Logged out)
            </a>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">1,143,393</span>
              / (Logged in)
            </a>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">938,287</span>
              /tour
            </a>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">749,393</span>
              /features/something
            </a>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">695,912</span>
              /features/another-thing
            </a>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">501,938</span>
              /users/username
            </a>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">392,842</span>
              /page-title
            </a>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">298,183</span>
              /some/page-slug
            </a>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">193,129</span>
              /another/directory/and/page-title
            </a>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">93,382</span>
              /one-more/page/directory/file-name
            </a>
          
        </div>
        <a href="#" class="btn btn-primary-outline">View all pages</a>
      </div>
      <div class="col-md-4 m-b-md">
        <div class="list-group">
          <h4 class="list-group-header">
            Devices and resolutions
          </h4>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">3,929,481</span>
              Desktop (1920x1080)
            </a>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">1,143,393</span>
              Desktop (1366x768)
            </a>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">938,287</span>
              Desktop (1440x900)
            </a>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">749,393</span>
              Desktop (1280x800)
            </a>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">695,912</span>
              Tablet (1024x768)
            </a>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">501,938</span>
              Tablet (768x1024)
            </a>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">392,842</span>
              Phone (320x480)
            </a>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">298,183</span>
              Phone (720x450)
            </a>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">193,129</span>
              Desktop (2560x1080)
            </a>
          
            <a class="list-group-item" href="#">
              <span class="pull-right text-muted">93,382</span>
              Desktop (2560x1600)
            </a>
          
        </div>
        <a href="#" class="btn btn-primary-outline">View all devices</a>
      </div>
    </div>

  </div>
</div>


    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/chart.js"></script>
    <script src="../assets/js/tablesorter.min.js"></script>
    <script src="../assets/js/toolkit.js"></script>
    <script src="../assets/js/application.js"></script>
    <script>
      // execute/clear BS loaders for docs
      $(function(){while(window.BS&&window.BS.loader&&window.BS.loader.length){(window.BS.loader.pop())()}})
    </script>
  </body>
</html>

